<script>
import request from "../../../utils/request"
import { showModal, showToast, valIsEmpty } from "@/utils"
import process from "../../components/practice/process.vue"
import doing from "../../components/practice/doing.vue"
import shareInfo from "../../../utils/shareInfo"
import rightArrowIcon from "../../../static/mine/right-arrow.png"
import websocket from "@/utils/websocket"
import store from "@/store"
import { userActionType } from "@/store/modules/user"
import studyRoomFloat from "@/components/studyRoomFloat/index.vue"
import vocabularyPlanInfo from "@/pages/index/components/vocabularyPlanInfo.vue"
import { vocabularyLearningActionType } from "@/store/modules/vocabularyLearning"

let timer
export default {
  name: "review",
  components: { process, doing, studyRoomFloat },
  data() {
    return {
      wordList: [],
      currentIndex: 0,
      currentReviewProcess: 0, //当前复习进度
      rightArrowIcon,
    }
  },
  computed: {
    planInfo: () => store.getters[vocabularyLearningActionType.getters.planInfo],
  },
  methods: {
    async submitRecord() {
      //提交单个复习记录
      await request({
        url: "userWordsRecord/updateReviewWords",
        data: {
          planId: this.planInfo.planId,
          thesaurusId: this.planInfo.thesaurusId,
          wordId: this.wordList[this.currentIndex].wordId,
        },
        showLoading: true,
      }).catch((err) => {
        console.log(err, "err")
      })
    },
    //下一个单词
    async nextWord() {
      await this.submitRecord()
      //如果当前单词已经是列表中的最后一个单词
      if (this.currentIndex >= this.wordList.length - 1) {
        //再取10个单词
        await this.getWordList()
        //已经复习完所有的单词了
        if (!this.wordList || this.wordList.length === 0) {
          await showModal({
            content: "已经复习完所有的单词了",
            showCancel: false,
          })
          uni.reLaunch({
            url: "/vocabulary/pages/currentPlanInfo/index",
          })
          return
        }
        this.currentIndex = 0
      } else {
        this.currentIndex++
      }
      this.currentReviewProcess++
    },
    //获取需复习的单词列表
    async getWordList() {
      this.wordList = await request({
        url: "userWordsRecord/getNewWords",
        data: {
          thesaurusId: this.planInfo.thesaurusId,
          planId: this.planInfo.planId,
        },
        errorHandle: true,
        showLoading: true,
      })
    },
  },
  onShow() {
    websocket.trackCurrentPage("单词复习", "BRUSH_WORDS", 1).catch(() => {})
  },
  async onLoad(option) {
    if (!store.getters[userActionType.getters.userSelectExamId]) {
      await store.dispatch(userActionType.action.examInfo)
    }
    //获取计划信息
    if (!this.planInfo.planId) {
      await store.dispatch(vocabularyLearningActionType.actions.planInfo)
    }
    await this.getWordList()
  },
  beforeDestroy() {
    //结束记录学习时长
    websocket.trackCurrentPage("单词复习", "BRUSH_WORDS", 2).catch(() => {})
  },
  //右上角分享
  async onShareAppMessage() {
    return await shareInfo.getDefaultShareInfo()
  },
}
</script>

<template>
  <view class="page">
    <process ref="process" :total-count="planInfo.unreviewedWordCount" :current-index="currentReviewProcess"></process>
    <!--		背单词区域-->
    <doing
      ref="doing"
      v-if="wordList.length > 0 && currentIndex >= 0"
      :thesaurus-id="planInfo.thesaurusId"
      :current-index="currentIndex"
      :word-list="wordList"
      :practice-mode="planInfo.practiceMode"
      @nextWord="nextWord"
      :show-prev-btn="false"
      @submitRecord="submitRecord"
    ></doing>
    <view class="tips">提示：你随时可以离开该界面，学习进度将自动保存</view>

    <studyRoomFloat></studyRoomFloat>
  </view>
</template>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  position: relative;
  .tips {
    padding: 20rpx;
    font-size: 30rpx;
    color: var(--text-color-light);
  }
}
</style>
